<template>

  <el-dialog :title="id ? '成本费率修改' : '成本费率添加'" :visible.sync="dialogVisible" width="60%" :close-on-click-modal="false">

    <el-form ref="main-form" :model="form" :rules="rules" label-width="180px" :inline="true" >
      <el-form-item label="费率名称" size="mini" prop="rateName">
        <el-input placeholder="" v-model="form.rateName" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      <el-form-item label="交易手续费(%)" size="mini" prop="serviceFee">
        <el-input placeholder="交易手续费，百分比" v-model="form.serviceFee" type="number" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      <el-form-item label="备注" size="mini">
        <el-input placeholder="备注" v-model="form.remark" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close" size="small">取 消</el-button>
      <el-button type="primary" @click="submit" size="small" :loading="loading">提 交</el-button>
    </div>

  </el-dialog>
</template>

<script>

import ApiMain from '@/api/bank.rateCost';
import ApiRateBoc from '@/api/exchangeRate.rateBoc';

export default {
  mixins: [
  ],
  props: [
  ],
  data () {
    return {

      dialogVisible: false,
      popDeleteVisible: false,
      loading: false,

      form: {
        rateName: '',
        serviceFee : '',
        remark : '',
      },

      rules: {
        rateName: [
          { required: true, message: '请输入费率名称', trigger: 'blur' },
        ],
        serviceFee: [
          { pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: '最多两位小数', trigger: 'change' }
        ],
      },

      id  : null,
      data: null,

    }
  },
  mounted () {
  },

  methods: {

    show (id = null) {

      this.id = id;

      if (this.id) {
        this.fetchData();
      }
      else {
        this.reset();
      }

      this.dialogVisible = true;
    },

    close () {
      this.dialogVisible = false;
      this.$emit('dialog-close');
    },

    reset () {
      this.form = {
        rateName: '',
        serviceFee : '',
        remark : '',
      };
    },

    handleFormatInputNum (e, value) {
      console.log(e, value)
    },

    fetchData () {

      ApiMain.info({id: this.id})
      .then(re => {
        this.data = re; 
      })
      .catch(() => {
        this.data = null;
      })
      .finally(() => {
        this.renderData();
      });
    },

    renderData () {
      this.form.rateName = this.data.rateName;
      this.form.serviceFee = this.data.serviceFee / 100;
      this.form.remark = this.data.remark;
    },

    verifyForm () {
      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },

    async submit () {

      if (! this.verifyForm()) return false;

      if (this.form.serviceFee <= 0 || this.form.serviceFee > 100) {
        this.$message.info('交易费率在0-100区间')
        return 
      }
      if (this.form.bondFee <= 0 || this.form.bondFee > 100) {
        this.$message.info('保证金费率在0-100区间')
        return 
      }

      this.loading = true;

      try {
        if (this.id) {
          await this.submitSet();
        }
        else {
          await this.submitAdd();
        }
      } finally {
        this.loading = false;
      }
    },

    async submitDel() {

      this.popDeleteVisible = false;
      this.loading = true;

      await ApiMain.del({id: this.id});

      this.loading = false;
      this.close();
      this.$message({message: '删除成功', type: 'success'});
    },

    async submitSet () {

      this.form.id = this.id;
      let form = JSON.parse(JSON.stringify(this.form))
      form = this.formatForm(form)
      await ApiMain.set(form);
      this.$message({message: '修改成功', type: 'success'});
      this.close();

    },

    async submitAdd () {

      let form = JSON.parse(JSON.stringify(this.form))
      form = this.formatForm(form)
      await ApiMain.add(form);
      this.$message({message: '添加成功', type: 'success'});
      this.close();
    },

    formatForm (form) {
      form.serviceFee = (form.serviceFee == '' ? 0 : form.serviceFee * 100)
      return form
    }
  }
}
</script>

<style>

</style>
